@keyframes extension-appear
  from
    opacity 0
  to
    opacity 1

@keyframes extension-el-appear
  from
    opacity 0
  to
    opacity 1

.p-extension
  position fixed
  left $gap * 2
  bottom $gap * 5.5 + $font_size * 2
  z-index 3
  user-select none
  animation extension-appear 0.6s ease
  @media (max-width: $app_mobile_width)
    display none
  &:hover
    .p-extension-button
      background var(--color-extension-front)
      border-color var(--color-extension-front)
      border-radius 0 0 50% 50%
    .p-extension-frame
      display block

.p-extension-button
  width $font_size * 2 + $gap
  height $font_size * 2 + $gap
  border $gap * 0.5 solid var(--color-extension-back)
  background var(--color-extension-back)
  border-radius 50%
  cursor pointer
  transition none
  img
    border-radius 50%

.p-extension-front, .p-extension-back
  height 100%
  animation extension-el-appear 0.6s ease
  display block

.p-extension-back
  display none

.p-extension-frame
  display none
  min-width $extension_grid_width + $gap * 2
  min-height $font_size * 2 + $gap * 2
  padding 0 $gap * 0.5
  background var(--color-extension-back)
  border-radius $gap $gap $gap 0
  border $gap * 0.5 solid var(--color-extension-front)

.p-extension-scroll
  max-height $extension_grid_width * 3.45 + $gap * 4 + $font_size * 2 // 0.65 * 3 + 0.1(offset)
  overflow-x hidden
  overflow-y auto
  &::-webkit-scrollbar
    width $gap
    background var(--color-clear)
  &::-webkit-scrollbar-thumb
    background-color var(--color-text)

.p-extension-content
  max-width $extension_grid_width * 5 + $gap * 6
  padding-top $gap
  a
    display inline-block
    width $extension_grid_width
    margin-left $gap
    border-radius $gap
    color var(--color-extension-front)
    &:hover
      background var(--color-extension-hover)
    img, span
      display block
    img
      width 100%
      transform scale(0.8)
      border-radius $gap
      overflow hidden
    span
      font-size 0.65em
      line-height 1
      text-align center
      padding 0 0.5em
      padding-bottom $extension_grid_width * 0.1
      white-space nowrap
      text-overflow ellipsis
      overflow hidden

:root.night
  .p-extension-front
    display none
  .p-extension-back
    display initial
